<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../js/vue.js?v=11" type="text/javascript" charset="utf-8"></script>
    <!--demo.css是格式化CSS文件-->
    <link rel="stylesheet" href="../css/demo.css"/>
    <!--浮动菜单-->
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="../css/newlist1.css?v=11"/>
</head>

<body>

<div id="index-ajax" >
<div id="headerUp" class="top-title">
    <div class="header-left">
        <ul type="none" class="ulA">
            <li class="liA">
                <a href="#" class="aa" style="text-decoration: none;">推荐</a>
            </li>
            <li class="liA">
                <a href="#" class="aa" style="text-decoration: none;">热点</a>
            </li>
            <li class="liA">
                <a href="#" class="aa" style="text-decoration: none;">视频</a>
            </li>
            <li class="liA">
                <a href="#" class="aa" style="text-decoration: none;">推荐</a>
            </li>
            <li class="liA">
                <a href="#" class="aa" style="text-decoration: none;">热点</a>
            </li>
            <li class="liA">
                <a href="#" class="aa" style="text-decoration: none;">视频</a>
            </li>
            <li class="liA">
                <a href="#" class="aa" style="text-decoration: none;">推荐</a>
            </li>
            <li class="liA">
                <a href="#" class="aa" style="text-decoration: none;">热点</a>
            </li>
            <li class="liA">
                <a href="#" class="aa" style="text-decoration: none;">视频</a>
            </li>
            <li class="liA">
                <a href="#" class="aa" style="text-decoration: none;">推荐</a>
            </li>
            <li class="liA">
                <a href="#" class="aa" style="text-decoration: none;">热点</a>
            </li>
            <li class="liA">
                <a href="#" class="aa" style="text-decoration: none;">视频</a>
            </li>
            <li class="liA">
                <a href="#" class="aa" style="text-decoration: none;">军事</a>
            </li>
            <li class="liA">
                <a href="#" class="aa" style="text-decoration: none;">更多</a>
            </li>

        </ul>
    </div>
    <div class="header-right">
        <ul type="none" class="ulB">
            <li style="display:inline" class="liB">
                <a href="#" class="aa" style="text-decoration: none;">更多</a>
            </li>
            <li style="display:inline" class="liB">
                <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
            </li>
            <li class="liB">
                <a href="#" class="aa" style="text-decoration: none;">反馈</a>
            </li>
            <li style="display:inline" class="liB">
                <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
            </li>
            <li class="liB">
                <a href="#" class="aa" style="text-decoration: none;">图虫</a>
            </li>
            <li style="display:inline" class="liB">
                <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
            </li>
            <li class="liB">
                <a href="#" class="aa" style="text-decoration: none;">头条号</a>
            </li>
            <li style="display:inline" class="liB">
                <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
            </li>
            <li class="liB">
                <a href="#" class="aa" style="text-decoration: none;">问答</a>
            </li>
            <li style="display:inline" class="liB">
                <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
            </li>
            <li class="liB"
                style="margin-left: 10px;width: 60px;height: 34px;background-color:red;text-align: center">
                <a href="#" class="aa" style="text-decoration: none;">登陆</a>
            </li>
        </ul>
    </div>
</div>

    <div class="box-shadow">
 <div class="headerdown-body">
    <div class="headerdownLeft">

            <img src="http://www.xmt.com/images/Logo/index.png" >
            <a class="he1" v-for="head in headerdown"  :href="head.url" >{{head.type}}<span>/</span></a>
            <a class="he3" href="" style="color: #666666">本页</a>
    </div>
     <div class="headerdownRight">
         <form class="form-wrapper cf">
             <input type="text" placeholder="搜索最新资讯" required>
             <button type="submit">Search</button>
         </form>
     </div>
</div>
    </div>
<div class="body">

    <div class="left">

        <!--<a href="hahhah" >-->
        <!--hahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh-->
        <!--</a>-->

    </div>

    <div class="centre"  v-for="new in newdata">
        <div class="title"><b>{{new.title}}</b></div>
        <div class="title-classify-time">
        <ul>
            <li><p>{{new.user}}</p></li>
            <li><p class="p1">{{new.time}}</p></li>
        </ul>
        </div>

        <div class="content1"><p>{{new.content1}}</p></div>
        <div class="pic1"><img :src="new.pic1"></div>
        <div class="content2"><p>{{new.content2}}</p></div>
        <div class="pic2"><img :src="new.pic2" ></div>
        <div class="content3"><p>{{new.content3}}</p></div>

        <!--<div class="centre-buttom" style="background-color: #1AA4CA;width: 500px;height: 12000px">-->
            <!--<div class="listnew"></div>-->
        <!--</div>-->
    </div>

    <div class="right">

    </div>
</div>
</div>
</body>
</html>


<script>
    var demo = new Vue({
        el: "#index-ajax",
        data: {
           headerdown:[
                      {url:"http://www.xmt.com/index.html", type:"首页"},
                      {url:"http://www.xmt.com/index.html", type:"社会"},
                     ],
            newdata:[
                {
                    title:"中国北方降雪今将基本结束 冷空气继续影响南方",
                    user: '中国新闻网 ',
                    time:"2017-02-22 00:32",
                    pic1:"http://www.xmt.com/images/NewList1/1.jpg",
                    pic2:"http://www.xmt.com/images/NewList1/2.jpg",
                    pic3:"",
                    content1:"'中新网北京2月22日电 连日来，中国经历了今年范围最大、强度最强的雨雪降温天气，其中出现降雪的国土面积达340万平方公里。"+
                    "根据预报，今日开始，北方降雪将基本结束，不过冷空气还将继续影响南方地区。" +
                    "中国天气网的直播显示，21日是雨雪范围最大、强度最强的一天，中国30个省份都出现雨雪。" +
                    "根据中央气象台官方网站21晚发布的消息，其中，出现降雪的国土面积达340万平方公里，是中国今年以来的最强降雪。在南方，重庆等多地则遭遇了今年以来最大降雨。" +
                    "伴随雨雪侵袭，多地气温也出现“断崖式”下跌，民众纷纷感叹“一夜入冬'。",
                    content2:"因实行高速管制，焦作沁阳站通行车辆寥寥。焦作高速交警队供图"+
                    "多地交通受阻"+
                    "连日来的雨雪天气也使得多地交通受阻。其中，遭遇暴雪袭击的新疆阿勒泰、塔城、伊犁、乌鲁木齐等地，多条道路封闭，民众交通出行严重受阻。乌鲁木齐机场36趟航班被迫取消。"+
                    "受雨雪天气影响，陕西境内部分高速公路收费站入口暂时封闭，多地客运线路一度停运。"+
                    "在河南，因降雪能见度低实行交通管制的高速路段达20多条，另因山西境内降雪严重，二广高速豫晋省界、南林高速豫晋省界—太行大峡谷、郑焦晋高速焦作西—豫晋省界向西禁上。"+
                    "据媒体21日报道，在北京，受降雪影响，从21日下午2点开始，首都机场出现大面积延误，延误比例达到23%。飞常准最新航班数据显示，当时全国12家机场因降雪被迫关闭。"+
                    "除了道路、民航等，铁路运输也受到影响。以兰州铁路局为例，受强冷空气影响，该局管内11趟列车出现不同程度晚点。",
                    content3:"因实行高速管制，焦作沁阳站通行车辆寥寥。焦作高速交警队供图"+
                    "多地交通受阻"+
                    "连日来的雨雪天气也使得多地交通受阻。其中，遭遇暴雪袭击的新疆阿勒泰、塔城、伊犁、乌鲁木齐等地，多条道路封闭，民众交通出行严重受阻。乌鲁木齐机场36趟航班被迫取消。"+
                    "受雨雪天气影响，陕西境内部分高速公路收费站入口暂时封闭，多地客运线路一度停运。"+
                    "在河南，因降雪能见度低实行交通管制的高速路段达20多条，另因山西境内降雪严重，二广高速豫晋省界、南林高速豫晋省界—太行大峡谷、郑焦晋高速焦作西—豫晋省界向西禁上。"+
                    "据媒体21日报道，在北京，受降雪影响，从21日下午2点开始，首都机场出现大面积延误，延误比例达到23%。飞常准最新航班数据显示，当时全国12家机场因降雪被迫关闭。"+
                    "除了道路、民航等，铁路运输也受到影响。以兰州铁路局为例，受强冷空气影响，该局管内11趟列车出现不同程度晚点。"


                }
                ]
        },


        ready: function () {
            //this.getdata()
            //this.getNew()
            //console.log(this.menu)
        },
        methods: {
            getdata: function () {
                console.log(this.index)
            },
            next: function () {
                //一下代码是自动刷新↓↓↓↓↓↓↓
                var data = this.news
                //console.log(data, 'before')
                //concat() 方法用于连接两个或多个数组。
                data = data.concat(data)
                //console.log(data, 'after')
                this.news = data
            },
        }
    })


    $(document).ready(function () {
        var range = 1550;             //距下边界长度/单位px
        var elemt = 500;           //插入元素高度/单位px
        var maxnum = 20;            //设置加载最多次数
        var num = 1;
        var totalheight = 0;
        var main = $("#index-ajax");                     //主体元素
        var timenum=0

        $(window).scroll(function () {
            var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)

            //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
            //console.log(" $(window).scrollTop()")
            console.log("页面的文档高度 ：" + $(document).height());
            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
            //浏览器的高度-距下边界长度<=0且1不等于20
            if (($(document).height() - range) <= totalheight && num != maxnum) {
                demo.next()
            }
        })
    })

</script>



